<template>
  <div class="app-page">
    <header class="app-head">
      <img src="../../../assets/image/publicTest/pclist-banner.jpg" />
    </header>
    <div class="content">
      <ul class="lists">
        <li v-for="item in dataList">
          <div class="userinfo">
            <h2 class="thumb"><img :src="item.thumb" /></h2>
            <div class="info">
              <p class="tel">{{item.tel}}</p>
              <p class="time">{{ item.publishDate}}</p>
            </div>
          </div>
          <div class="imglist" style="display:-webkit-box;">
            <p v-if="item.pictures1" style="-webkit-box-flex:1;"><a :href="item.url" ca="zc_v170628_wzlist_click"><img :src="item.pictures1" /></a></p>
            <p v-if="item.pictures2" style="-webkit-box-flex:1;"><a :href="item.url" ca="zc_v170628_wzlist_click"><img :src="item.pictures2" /></a></p>
            <p v-if="item.pictures3" style="-webkit-box-flex:1;"><a :href="item.url" ca="zc_v170628_wzlist_click"><img :src="item.pictures3" /></a></p>
          </div> 
          <p><a :href="item.url" class="txt" ca="zc_v170628_wzlist_click">{{ item.title }}</a></p>
        </li>
      </ul>
    </div>
    <a href="javascript:;" v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
  </div>
</template>

<style lang="scss" scope>
@import '../../../assets/css/common.scss';
@import '../../../assets/css/dropload.css';
body{background:#edf0f5;font-size:rem(13);margin:0 auto}
img{max-width:100%}
.app-page{
  .app-head{text-align:center;margin-bottom:rem(10)
  }
  .content{
    .lists{
      li{padding:rem(10);margin-bottom:rem(10);background:$_fff;border-bottom:1px solid #dddedf;
        .userinfo{margin-bottom:rem(15);
          .thumb{width:rem(35);height:rem(35);border-radius:50%;background:#959595;display:inline-block;
            img{width:rem(35);height:rem(35);border-radius:50%;}
          }
          .info{display:inline-block;width:82%;margin-left:rem(5);vertical-align:middle;
            .tel{color:#404040;}
            .time{color:#bbbbbb}
          }
        }
        .imglist{display:flex;align-items:flex-start;
          p{margin-bottom:rem(5);
           &:nth-child(2){margin:0 rem(5);}
           img{width:100%;height:rem(123.34)}
          }
        }
        .txt{color:#282828;font-size:rem(17);display:block;margin-top:rem(2);
          &:active{color:#666;}
        }
        .des{color:#888;}        
      }
    }
  }
 .shareGuide{
    width:rem(50);
    height:rem(50);
    line-height:rem(50);
    text-align:center;
    color:$_fff;
    background:transparent url("../../../assets/image/publicTest/share-icon.png") no-repeat top left;
    background-size:100% 100%;
    position:fixed;
    right:rem(5);
    top:50%;
    z-index:3;
  }
}
</style>

<script>
import common from "../../../assets/js/common.js";
import drop from "../../../assets/js/dropload.min.js";
import {Toast} from 'mint-ui';
export default {
  data (){
    return {
      getDateUrl:common.isdev() + '/zhongce/contents.htm?',
      dataList:[],
      shareObj:{},
      signUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx")  ,
      isShowShareBtn:common.checkAppversionIsGt35(),
      isApp:common.isApp()
    }
  },
  created(){

   /* e.$http.get(e.getDateUrl).then(res=>{
      var data = JSON.parse( res.body.trim() ), oDate = data.result.creditTradeVOs, len = oDate.length;
      data.errorCode && len > 0 && (e.dataList = oDate);

    },(err)=>{
      Toast("网络异常");
    });*/
  },
  mounted(){
    var e = this;
    //分享数据配置
    e.shareObj = {
      friend: {
        title: "【众测达人】毒舌点评，真相只有一个！",
        desc: "商品到底靠不靠谱？评测广场带你走向事实真相！",
        link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
        imgUrl: "https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zs.png"
      },
      friendQuan: {
        title: "",
        desc: "【众测达人】毒舌点评，真相只有一个！",
        link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
        imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zs.png"
      }
    };
    
    //分享判断渠道
    if(!common.isApp()){       
       common.wxShare(e);
    }else{
      if(e.isShowShareBtn){
       e.share();  
      }
    }
  
    e.pageLoad(e);
    var _this = this;
		//打点
		_this.$nextTick(function () {
			common.ANA_AnalyticsScan();
		});
  },
  methods:{
    //分享
    share(){
      var e = this;
      common.appShare(e);
    },
    pageLoad(e){
    	var _this = this;
      var num = 1;
      //检测是否带参
      if(common.getQueryString('sid')){
        e.getDateUrl +="sid=" + common.getQueryString('sid') + "&";
      }
      // 
      $('.content').dropload({
        scrollArea : window, 
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domUpdate  : '<div class="dropload-update">↓释放加载</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多数据了~！</div>'
        },   
        loadDownFn : function(me){
          $.ajax({
            type: 'GET',
            url: e.getDateUrl + 'pageSize=10&pageIndex=' + num++,
            dataType: 'json',
            success: function(data){
              var code = data.result, msg = data.msg;               
              if( code == 1 ){
                 var oData = data.obj, total = oData.totalRows,
                     arr = oData.creditTradeVOs,
                     len = arr.length;
                 if(total == e.dataList.length + len){
                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();                   
                    setTimeout(function(){
                      $(".dropload-down").hide(); 
                    },1000)               
                  }

                  if(len>0){
                    setTimeout(function(){
                      for(var i=0; i < len; i++){
                      	var dataObj = arr[i];
                        var sid = common.getQueryString('sid') ? 'sid='+ common.getQueryString('sid') +'&' : '';
                        dataObj.url = '../commentDetail/commentDetail.'+ common.isHtml() +'?' + sid +'id=' + dataObj.id;
                      	e.dataList.push(dataObj);
                      }
                      // 每次数据加载完，必须重置
                      setTimeout(function () {
                         me.resetload(); 
                      },100);
                     
                      //打点
											_this.$nextTick(function () {
												common.ANA_AnalyticsScan();
											});
                    },1000);
                  }
              }else {
                Toast(msg);
              }    
            },
            error: function(xhr, type){
              console.log("ajax error");
              // 即使加载出错，也得重置
              //me.resetload();
            }
          });
        }       
      });
   }


  }
}


</script>